<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  -->
<div class="progress active" ng-show="!streamReady">
	<div class="progress-bar progress-bar-primary progress-bar-striped" style="width: 100%">
	</div>
</div>

<!-- Step navigation -->
<div ng-show="streamReady">
	<div class="row step-cntr">
		<div class="col-md-3" ng-repeat="step in steps">
			<div class="step" ng-class="stepSelect($index + 1)">
				<h1>{{$index + 1}}</h1>
				<h2>Step {{$index + 1}}</h2>
				<p title="{{step.title}}">{{step.title}}</p>
			</div>
		</div>
	</div>

	<!-- Step container -->
	<div class="box box-info">
		<div class="box-header with-border">
			<h3 class="box-title">Step {{step}} - {{steps[step - 1].title}}</h3>
		</div><!-- /.box-header -->

		<div class="box-body">
			<!-- ---------------------- Step Body Start ---------------------- -->

			<!-- Step 1: Data Source -->
			<div ng-show="step === 1">
				<div class="form-group">
					<label>Select Data Source</label>
					<select class="form-control" ng-model="policy.tags.dataSource">
						<option ng-repeat="dataSource in site.current().dataSrcList" ng-hide="dataSource.hide" value="{{dataSource.tags.dataSource}}">{{dataSource.desc || dataSource.tags.dataSource}}</option>
					</select>
				</div>
			</div>

			<!-- Step 2: Stream -->
			<div ng-show="step === 2">
				<div class="pull-right" ng-show="policy.__.advanced === undefined">
					<span class="text-muted">or</span>
					<a ng-click="policy.__.advanced = true;">Advanced</a>
				</div>

				<div class="form-group">
					<label>Select Stream</label>
					<select class="form-control" ng-model="policy.__.streamName" ng-show="!policy.__.advanced">
						<option ng-repeat="stream in dataSources[policy.tags.dataSource]">{{stream.tags.streamName}}</option>
					</select>
					<select class="form-control" ng-show="policy.__.advanced" disabled="disabled">
						<option>[Advanced Mode]</option>
					</select>
				</div>

				<div class="checkbox" ng-show="policy.__.advanced !== undefined">
					<label>
						<input type="checkbox" ng-model="policy.__.advanced">
						Advanced Mode
					</label>
				</div>
			</div>

			<!-- Step 3: Define Alert Policy -->
			<div ng-show="step === 3 && !policy.__.advanced">
				<!-- Criteria -->
				<div>
					<label>Match Criteria</label>
					<a ng-click="collapse('.panel-group')">expand / collapse all</a>

					<div class="panel-group panel-group-sm" role="tablist">
						<div class="panel panel-default"
							ng-repeat="meta in _stream.metas"
							ng-init="op = '=='; val = null; type = (meta.attrType || '').toLowerCase();">
							<div class="panel-heading" role="tab">
								<h4 class="panel-title">
									<span class="bg-navy disabled color-palette pull-right">
										{{parseConditionDesc(meta.tags.attrName)}}
									</span>

									<a role="button" data-toggle="collapse" href="[data-name='{{meta.tags.attrName}}']" class="collapsed">
										<span class="fa fa-square" ng-class="hasCondition(meta.tags.attrName, type) ? 'text-green' : 'text-muted'"> </span>
										{{meta.attrDisplayName || meta.tags.attrName}}
										<span class="fa fa-question-circle" ng-show="meta.attrDescription"
										tooltip="{{meta.attrDescription}}" tooltip-placement="right" tooltip-animation="false"> </span>
									</a>
								</h4>
							</div>
							<div data-name="{{meta.tags.attrName}}" data-type="{{meta.attrType}}" role="tabpanel" class="collapse">
								<div class="panel-body">
									<ul ng-show="type !== 'bool'">
										<li ng-repeat="cond in policy.__.conditions[meta.tags.attrName]">
											[<a ng-click="policy.__.conditions[meta.tags.attrName].splice($index, 1)">X</a>]
											{{cond.toString()}}
										</li>
									</ul>

									<!-- String -->
									<div ng-if="type == 'string'">
										<div class="input-group" style="max-width: 450px;">
											<div class="input-group-btn">
												<select class="form-control" ng-model="op">
													<option ng-repeat="mark in ['==','!=','contains','regex']">{{mark}}</option>
												</select>
											</div>

											<!-- With resolver -->
											<input type="text" class="form-control" autocomplete="off" ng-model="val" ng-show="meta.attrValueResolver"
												ng-keypress="conditionPress($event, meta.tags.attrName, op, val, type)"
												typeahead="item for item in resolverTypeahead($viewValue, meta.attrValueResolver)">
											<!-- Without resolver -->
											<input type="text" class="form-control" autocomplete="off" ng-model="val" ng-show="!meta.attrValueResolver"
												ng-keypress="conditionPress($event, meta.tags.attrName, op, val, type)">

											<span class="input-group-btn">
												<button class="btn btn-info btn-flat" type="button" ng-click="addCondition(meta.tags.attrName, op, val, type);val=null;">Add</button>
											</span>
										</div>
									</div>

									<!-- Number -->
									<div ng-if="type == 'long' || type == 'integer' || type == 'number' || type == 'double' || type == 'float'">
										<div class="input-group" style="max-width: 450px;">
											<div class="input-group-btn">
												<select class="form-control" ng-model="op">
													<option ng-repeat="mark in ['==','!=','>','>=','<','<=']">{{mark}}</option>
												</select>
											</div>

											<input type="number" class="form-control" autocomplete="off" placeholder="Number Only..." ng-model="val" ng-keypress="conditionPress($event, meta.tags.attrName, op, val, type)">
											<span class="input-group-btn">
												<button class="btn btn-info btn-flat" type="button" ng-click="addCondition(meta.tags.attrName, op, val, type) ? val=null : void(0);">Add</button>
											</span>
										</div>
									</div>

									<!-- Boolean -->
									<div ng-if="type == 'bool'" ng-init="policy.__.conditions[meta.tags.attrName] = policy.__.conditions[meta.tags.attrName] || [_CondUnit(meta.tags.attrName, '==', 'none', 'bool')]">
										<select class="form-control" ng-model="policy.__.conditions[meta.tags.attrName][0].val" style="max-width: 100px;">
											<option ng-repeat="bool in ['none','true','false']">{{bool}}</option>
										</select>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Window -->
				<div class="checkbox">
					<label>
						<input type="checkbox" ng-checked="policy.__.windowConfig" ng-click="policy.__.windowConfig = !policy.__.windowConfig"> Slide Window
					</label>
				</div>
				<div ng-show="policy.__.windowConfig">
					<div class="row">
						<div class="col-md-4">
							<div class="form-group">
								<label for="window">Window</label>
								<select class="form-control" ng-model="policy.__.window"
								tooltip="{{getWindow().description}}" tooltip-animation="false">
									<option ng-repeat="item in config.window" value="{{item.type}}">{{item.title}}</option>
								</select>
							</div>
						</div>

						<!-- fields -->
						<div class="col-md-4" ng-repeat="field in getWindow().fields" ng-init="field.val = field.val || (field.defaultValue || '');" ng-hide="field.hide">
							<div class="form-group" ng-class="{'has-warning' : !field.val || !field.val.match(field.regex)}">
								<label for="window">Window - {{field.title}}</label>
								<input type="text" class="form-control" autocomplete="off" placeholder="{{field.description}}" ng-model="field.val" title="{{field.description}}">
							</div>
						</div>
					</div>

					<!-- Aggregation -->
					<div class="row">
						<div class="col-md-4">
							<div class="form-group" ng-class="{'text-yellow' : (policy.__.groupAgg && !policy.__.groupAggPath)}">
								<label for="window">Aggregation</label>
								<div class="input-group">
									<div class="input-group-btn">
										<select class="form-control" ng-model="policy.__.groupAgg" ng-change="updateGroupAgg()">
											<option ng-repeat="op in ['max','min','avg','count']">{{op}}</option>
										</select>
									</div>
									<select class="form-control" ng-model="policy.__.groupAggPath" ng-class="{'has-warning' : !policy.__.groupAggPath}" id="groupAggPath"
											ng-show="policy.__.groupAgg" ng-disabled="policy.__.groupAgg === 'count'">
										<option ng-repeat="meta in groupAggPathList()">{{meta.tags.attrName}}</option>
									</select>
								</div>
							</div>
						</div>

						<div class="col-md-4">
							<div class="form-group" ng-class="{'text-yellow' : (!policy.__.groupCondOp || !policy.__.groupCondVal)}">
								<label for="window">Condition</label>
								<div class="input-group">
									<div class="input-group-btn">
										<select class="form-control" ng-model="policy.__.groupCondOp" ng-class="{'has-warning' : !policy.__.groupCondOp}">
											<option ng-repeat="op in ['>','<','>=','<=','==']">{{op}}</option>
										</select>
									</div>
									<input type="text" class="form-control" ng-model="policy.__.groupCondVal" ng-class="{'has-warning' : !policy.__.groupCondVal}" />
								</div>
							</div>
						</div>
					</div>

					<!-- Group -->
					<div class="row">
						<div class="col-md-4">
							<div class="form-group">
								<label for="window">Group By</label>
								<select class="form-control" ng-model="policy.__.group">
									<option value="">None</option>
									<option ng-repeat="meta in _stream.metas">{{meta.tags.attrName}}</option>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Step 3: Define Alert Policy -->
			<div ng-show="step === 3 && policy.__.advanced">
				<div class="form-group">
					<label>Query Expression</label>
					<textarea class="form-control" ng-model="policy.__._expression"
					placeholder="Query expression. e.g. from hdfsAuditLogEventStream[(cmd=='open') and (host=='localhost' or host=='127.0.0.1')]#window.time(2 sec) select * insert into outputStream;" rows="5"></textarea>
				</div>
			</div>

			<!-- Step 4: Email Notification -->
			<div ng-show="step === 4">
				<div class="row">
					<div class="col-xs-4">
						<div class="form-group" ng-class="{'has-warning' : !policy.tags.policyId}">
							<label>Policy Name</label>
							<input type="text" class="form-control" placeholder="" ng-model="policy.tags.policyId" ng-disabled="!create">
						</div>
					</div>
					<div class="col-xs-3">
						<div class="form-group">
							<label>
								Alert De-Dup Interval(min)
								<span class="fa fa-question-circle" tooltip="Same type alert will be De-dup in configured interval"> </span>
							</label>
							<input type="number" class="form-control" ng-model="policy.__.dedupe.alertDedupIntervalMin" placeholder="[Minute] Number only. Suggestion: 720">
						</div>
					</div>
					<div class="col-xs-3">
						<div class="form-group">
							<label>
								Email De-Dup Interval(min)
								<span class="fa fa-question-circle" tooltip="The minimun time interval of email"> </span>
							</label>
							<input type="number" class="form-control" ng-model="policy.__.dedupe.emailDedupIntervalMin" placeholder="[Minute] Number only. Suggestion: 1440">
						</div>
					</div>
					<div class="col-xs-2">
						<div class="form-group">
							<label>
								Enabled
							</label>
							<p>
								<input type="checkbox" checked="checked" ng-model="policy.enabled">
							</p>
						</div>
					</div>
				</div>

				<div>
					<a data-toggle="collapse" href="[data-id='advancedDeDup']">Advanced De-Dup</a>
					<div data-id='advancedDeDup' class="collapse">
						<label>
							De-Dup Key
							<span class="fa fa-question-circle" tooltip="Type of grouping alerts. If you don't know how to config, leave it default."> </span>
						</label>
						<div class="form-group">
							<div class="checkbox" ng-repeat="meta in _stream.metas" ng-init="create ? policy.__._dedupTags[meta.tags.attrName] = !!meta.usedAsTag : void(0);">
								<label>
									<input type="checkbox" ng-model="policy.__._dedupTags[meta.tags.attrName]">
									{{meta.tags.attrName}}
								</label>
							</div>
						</div>
					</div>
				</div>

				<hr/>

				<div class="form-group">
					<label>Sender</label>
					<input type="text" class="form-control" value="noreply-hadoop-eagle@company1.com" placeholder="Enter Sender. e.g. sender@eaxmple.com" ng-model="policy.__.notification[0].sender">
				</div>
				<div class="form-group">
					<label>Recipients</label>
					<input type="text" class="form-control" placeholder="Enter Recipients. Split with ','. e.g. usera@example.com, userb@example.com" ng-model="policy.__.notification[0].recipients">
				</div>
				<div class="form-group">
					<label>Subject</label>
					<input type="text" class="form-control" placeholder="Enter Subject" ng-model="policy.__.notification[0].subject">
				</div>
				<div class="form-group">
					<label>Description</label>
					<textarea class="form-control" placeholder="Policy description" ng-model="policy.desc"></textarea>
				</div>

				<a data-toggle="collapse" href="[data-id='policyQuery']">
					View Query
				</a>
				<div class="collapse in" data-id="policyQuery">
					<pre>{{toQuery()}}</pre>
				</div>
			</div>

			<!-- ----------------------- Step Body End ----------------------- -->
		</div><!-- /.box-body -->

		<div class="overlay" ng-hide="stepReady(step)">
			<span class="fa fa-refresh fa-spin"> </span>
		</div>

		<div class="box-footer text-right">
			<button class="btn btn-info" ng-show="step > 1" ng-click="changeStep(step, step - 1, false)" ng-disabled="lock">
				Prev <span class="fa fa-arrow-circle-o-left"> </span>
			</button>
			<button class="btn btn-info" ng-show="step < steps.length" ng-click="changeStep(step, step + 1)" ng-disabled="checkNextable(step) || lock">
				Next <span class="fa fa-arrow-circle-o-right"> </span>
			</button>
			<button class="btn btn-info" ng-show="step === steps.length" ng-click="finishPolicy()" ng-disabled="checkNextable(step) || lock">
				Done <span class="fa fa-check-circle-o"> </span>
			</button>
		</div>
	</div>
</div>
